<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* * {
            margin: 0;
            padding: 0;
        } */

        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-position: center;
            background-size: cover;
            transition: 0.5s;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: -1;
        }

        .contaniner {
            width: 70vw;
            height: 70vh;
            position: relative;
            /* 关键 */
            overflow: hidden;
            cursor: pointer;
        }

        .photos {
            opacity: 0;
            width: 100vw;
            height: 100vh;
            background-position: center;
            background-size: cover;
            position: absolute;
            top: -15vh;
            left: -15vw;
            border: solid;
            z-index: 1;
            transition: 0.5s;
        }

        .photos.active {
            opacity: 1;

        }

        .botton {
            position: fixed;
            background-color: transparent;
            padding: 20px;
            font-size: 30px;
            border: 1px solid black;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }

        .left {
            left: calc(15vw - 70px);
        }

        .right {
            right: calc(15vw - 70px);

        }
    </style>
</head>

<body>
    <div class="contaniner">

        <div class="photos active" style="background-image: url(./imgs/photo_1.png)"></div>
        <div class="photos" style="background-image: url(./imgs/photo_2.png)"></div>
        <div class="photos" style="background-image: url(./imgs/photo_3.png)"></div>
        <div class="photos" style="background-image: url(./imgs/photo_4.png)"></div>
        <div class="photos" style="background-image: url(./imgs/photo_5.png)"></div>

        <!-- <div class="left botton">←</div>
        <div class="right botton">→</div> -->
        <button class="left botton">←</button>
        <button class="right botton">→</button>

    </div>
    <script>
        //获取
        const body = document.body;
        const photos = document.querySelectorAll('.photos');
        const left = document.querySelector('.left');
        const right = document.querySelector('.right');
        const con = document.querySelector('.contaniner')
        console.log(photos);
        //记录当前展示的图片
        let activeSilde = 0;


        //点击右边移动 下一张
        let moveNext = () => {
            activeSilde++;
            //边界处理
            if (activeSilde == photos.length) {
                activeSilde = 0;
            }
            //疑问
            setActivePhoto();
            setBGtoBody();

        };
        right.onclick = moveNext;

        var timer = setInterval(() => {
            moveNext();
        }, 1000);
        //点击左移，上一张
        let movePrev = () => {
            activeSilde--;
            //边界处理
            if (activeSilde < 0) {
                activeSilde = photos.length - 1;
            }
            setActivePhoto();
            setBGtoBody();
        };
        left.onclick = movePrev;

        //移动时切换图片以及背景的图标一起

        function setBGtoBody() {
            body.style.backgroundImage = photos[activeSilde].style.backgroundImage;
        };
        setBGtoBody();
        function setActivePhoto() {
            photos.forEach((ele) => ele.classList.remove('active'));
            photos[activeSilde].classList.add('active');
        };

        //2. 鼠标经过，清除计时器
        con.addEventListener('mouseenter', function () {

            clearInterval(timer);
            timer = null;//清除计时器
        });
        //2. 鼠标离开，开始计时器

        con.addEventListener('mouseleave', function () {

            timer = setInterval(function () {

                moveNext();
            }, 1000);
        });



    </script>
</body>

</html>